<template>
	<div style="width:100%;;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);">
		<div v-if="componentModel.subType=='kpi'" style="text-align: center;">
			<div style="margin-top: 2px;" >{{componentModel.title}}</div>
			<div style="margin-top: 10px;font-size: 26px;font-weight: bold;">{{value}}</div>
		</div>
		<div v-else-if="componentModel.subType=='indicatortable'">
			<div style="margin-top: 10px;margin-left: 10px;" >{{componentModel.title}}</div>
			<van-row style="margin-top: 10px;margin-left: 10px;">
				<van-col :span="12">
					{{header.name}}
				</van-col>
				<van-col :span="12">
					<van-tag size="mini" type="warning">{{header.value}}</van-tag>
				</van-col>
			</van-row>
			<van-row style="margin-top: 10px;margin-left: 10px;" v-for="item in list" :key="item.value">
				<van-col :span="12">
					{{item.name}}
				</van-col>
				<van-col :span="12">
					<van-tag size="mini">{{item.value}}</van-tag>
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	export default {
		name: "IndicatorTableComponent",
		props: ["componentModel"],
		data() {
			return {
				value: "",
				header:{},
				list:[]
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				if(this.componentModel.subType=="kpi"){
					var value = prop["value"];
					if (value != undefined) {
						this.value = value;
					}else if(value==null){
						this.value = 0;
					}
				}else if(this.componentModel.subType=="indicatortable"){
					var data=prop["data"];
					if(data!=undefined){
						this.header=data.header;
						this.list=data["list"];
					}else if(data==null){
						this.header=[];
						this.list=[];
					}
				}
			}
		},
	}
</script>

<style>
</style>